@import "/web/css/common/main-mobile";

//手机端
img{display: block;}
.cimg{
    width: 100%;background: center top no-repeat;
}

.main-cont{
    padding-bottom: 105px;background: url("./img/main-cont-bg.jpg") center top no-repeat;
}

.main-bg{
    padding-top: 30px;
}

.title-img{
    background: center top / contain no-repeat;height: 110px;
    &.title-img-1{background-image: url("/web/views/index/img/title-img-1.png");}
    &.title-img-2{background-image: url("/web/views/index/img/title-img-2.png");}
    &.title-img-3{background-image: url("/web/views/index/img/title-img-3.png");}
    &.title-img-4{background-image: url("/web/views/index/img/title-img-4.png");}
    &.title-img-5{background-image: url("/web/views/index/img/title-img-5.png");}
}

.plan-container{
    height: 350px;margin-top: 66px;
    .swiper-slide{text-align: center;line-height: 350px;
        img{width: 55%;opacity: .3;vertical-align: middle;transition: 1s;display: inline-block;}
        &.swiper-slide-active{
            img{width: auto;opacity: 1;}
        }
    }
    .plan-pagination{bottom: -4px;}
}

.line{
    height: 23px;background-image: url("./img/line.png");margin: 55px 0;
}

.explain-game{
    height: 395px;background-image: url("./img/explain-game-img.png");position: relative;
    .btn{position: absolute;left: 266px;bottom: 24px;}
    .car-bg{position: absolute;left: 0;bottom: 5px;}
}

.explain-join{
    height: 228px;background-image: url("./img/explain-join-img.png");position: relative;
    .btn{position: absolute;left: 266px;bottom: 30px;}
}

.explain-finals{
    height: 265px;background-image: url("./img/explain-finals-img.png");position: relative;
    .btn{position: absolute;left: 266px;bottom: 30px;}
}

.red-bg-box{
    background: url("./img/red-bg.png") center 70px no-repeat;
}

.video-box{
    height: 447px;background-image: url("./img/video-box-bg.png");margin-top: 20px;box-sizing: border-box;padding-top: 40px;
    .video-black{
        width: 510px;height: 300px;margin: 0 auto;padding: 6px;box-sizing: border-box;background-color: #000;
        .video-js{
            width: 100%;height: 100%;overflow: hidden;
            video{object-fit: cover;}
            .vjs-big-play-button{top: 50%;left: 50%;margin-top: -20px;margin-left: -50px;}
        }
    }
}

.to-sign-up{
    width: 218px;height: 53px;background-image: url("./img/to-sign-up-btn.png");margin: 20px auto 0;display: block;
}

.five-city{
    height: 310px;margin-top: 40px;position: relative;
    .time{
        height: 38px;background: url("./img/five-time-bg.png") 16px top no-repeat;padding: 0 10px 0 30px;
        .li{width: 20%;float: left;height: 100%;}
        .cur{position: absolute;width: 25px;height: 26px;background-image: url("./img/five-active.png");top: -22px;left: 73px;transition: .5s;}
    }
    .five-container{
        height: 239px;margin-top: 14px;
        .swiper-slide{
            background: center top no-repeat;position: relative;
            a{position: absolute;width: 204px;height: 114px;right: 29px;bottom: 27px;background-image: url("./img/five-table-btn.png");}
            &.slide-gz{background-image: url("./img/five-gz.png");}
            &.slide-nj{background-image: url("./img/five-nj.png");}
            &.slide-bj{background-image: url("./img/five-bj.png");}
            &.slide-cd{background-image: url("./img/five-cd.png");}
            &.slide-sh{background-image: url("./img/five-sh.png");}
        }
    }
}

.champion-img{
    height: 207px;background-image: url("./img/champion-img.png");
}

.new-xiu{
    width: 602px;margin: 28px 0 0 22px;box-sizing: border-box;padding-top: 15px;padding-left: 44px;
    .new-xiu-video{
        width: 500px;border: 4px solid #000;background-color: #000;
        li{
            margin-top: 4px;width: 500px;height: 280px;background-color: #fff;overflow: hidden;
            &:first-child{margin-top: 0;}
            video{width: 100%;height: 100%;background: center / cover no-repeat;object-fit: cover;}
        }
    }
    .btn{margin-top: 30px;height: 53px;width: 218px;background: url("/web/views/index/img/see-send-rule.png") center / contain no-repeat;display: block;margin-left: 150px;}
}

.report-box{
    height: 766px;background: url("img/report-bg.png") left 81px no-repeat;
    .pic-box{
        width: 494px;border: 3px solid #eb1c24;height: 280px;margin: 93px auto 0;background: #fff center / cover no-repeat;
    }
    .articles{
        width: 500px;margin: 0 auto;padding-top: 5px;
        .a{
            margin-top: 20px;padding: 0 130px 0 30px;background: url("img/icon-article.png") left 6px no-repeat;display: block;color: #595757;font-size: 20px;line-height: 28px;position: relative;
            i{position: absolute;width: 115px;height: 28px;top: 0;right: 0;background-image: url("img/btn-detail.png")}
        }
    }
}

.to-vote{
    width: 218px;height: 53px;background: url("/web/views/index/img/to-vote.png") center / contain no-repeat;margin: 30px auto 0;display: none;
}

.fixed-side{
    position: fixed;width: 42px;height: 237px;top: 50%;margin-top: -115px;right: 0;background: url("./img/fixed-side.png") center / contain no-repeat;z-index: 9;
    a{
        display: block;height: 50%;
    }
}

//公共列表区域
.rank-box{
    margin-top: 40px;
    .line{margin-top: 150px;margin-bottom: 0;}
    .first{
        width: 100%;height: 370px;padding-left: 64px;position: relative;box-sizing: border-box;
        .pic-box{
            height: 100%;width: 279px;background-size: contain;padding: 17px 0 0 11px;
            .pic{background: center / cover no-repeat;width: 100%;height: 100%;width: 250px;height: 333px;border: 3px solid #fff;}
        }
        .info{
            width: 200px;margin: 20px 0 0 25px;
            .name{margin-top: 20px;font-size: 32px;font-weight: bold;color: #d01e25;}
            .text{color: #595757;font-size: 20px;margin-top: 15px;line-height: 30px;}
        }
        .car-icon{position: absolute;top: 280px;left: 60px;}
    }
    .ul{
        margin: 0 0 0 -54px;overflow: hidden;padding-left: 74px;padding-top: 20px;
        .li{
            float: left;margin: 30px 0 0 54px;cursor: pointer;
            .pic{
                position: relative;width: 210px;height: 280px;
            }
            .text{font-size: 22px;line-height: 28px;}
        }
    }
    .rank-like{
        line-height: 22px;background-position: 9px 5px;padding-left: 30px;
    }
}


